<style>
    #images-group img{
        width: 100%;
    }
</style>
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"style="padding: 20px 30px 0 0;">

    <div class="layui-col-md6">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <script type="text/html" template>
                    <input type="text" name="name" value="{{ d.params.name || '' }}"  autocomplete="off" class="layui-input">
                </script>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属用户</label>
            <div class="layui-input-inline">
                <script type="text/html" template lay-url="home/user?num=100" lay-type="post" lay-done="layui.form.render(null, 'layuiadmin-app-form-list')">
                    <select lay-filter="parameters-select" name="user_id" lay-verify="required">
                        <option value="0">选择用户</option>
                        {{# layui.each(d.data,function(index,item){ }}
                        <option value="{{ item.id }}" {{ d.params.user_id == item.id ? 'selected' : '' }}>{{ item.mobile }}</option>
                        {{# }); }}
                    </select>
                </script>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <script type="text/html" template>
                    <input type="text" name="sort" value="{{ d.params.sort || 0 }}" autocomplete="off" class="layui-input">
                </script>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <script type="text/html" template>
                    <input type="number" name="price" value="{{ d.params.price || '0.00' }}" min="1" autocomplete="off" class="layui-input">
                </script>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-inline">
                <script type="text/html" template>
                    <input type="radio" name="status" value="1" title="上架" {{ Object.keys(d.params).length === 0 || d.params.status == 1 ? 'checked': '' }}>
                    <input type="radio" name="status" value="0" title="下架" {{ d.params.status == 0 ? 'checked':'' }}>
                </script>
            </div>
        </div>

        <script type="text/html" template>
            <input type="hidden" name="id" value="{{ d.params.id || 0 }}">
        </script>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-footer">
                    <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="确认" class="layui-btn">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">

        <div class="layui-form-item">
            <label class="layui-form-label">封面图</label>
            <div class="layui-input-inline">
                <script type="text/html" template>
                    <input type="text" name="preview" value="{{ d.params.preview || '' }}" id="preview-url" lay-verify="required" placeholder="图片地址" autocomplete="off" class="layui-input">
                </script>
            </div>
            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                <button class="layui-btn layui-btn-primary" layadmin-event="uploadwidget" data-elem="preview">选择文件</button>
            </div>
            <label class="layui-form-label"> </label>
            <script type="text/html" template>
                <div class="layui-input-inline"><img id="preview-img" style="display: {{# d.params.preview ? 'none':'block' }};max-width: 100%;" src="{{ d.params.preview || '' }}"></div>
            </script>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">轮播图</label>
            <div class="layui-input-inline">
                <input type="hidden" id="images-url" class="layui-input">
            </div>
            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                <button class="layui-btn layui-btn-primary" layadmin-event="uploadwidget" data-elem="images">选择文件</button>
                <button class="layui-btn layui-btn-danger images-delete">删除当前图片</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> </label>
            <div class="layui-input-block">
                <label class="layui-form-label"> </label>
                <script type="text/html" template lay-done="layui.data.done(d)">
                    <div class="layui-carousel" id="images-group">
                        <div carousel-item>
                            {{# layui.each(d.params.images,function(index,item){ }}
                            <div>
                                <input type="hidden" name="images[]" value="{{ item }}">
                                <img src="{{ item }}">
                            </div>
                            {{# }); }}
                        </div>
                    </div>
                </script>
            </div>
        </div>
    </div>

</div>
<script>

    layui.data.done = function (d){

        layui.use(['carousel'],function (){
            const $ = layui.$
                ,carousel = layui.carousel;

            let ins = carousel.render({
                elem: '#images-group'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
                ,autoplay : false
                ,arrow: 'always'
                ,height: '200px'
                //,anim: 'updown' //切换动画方式
            });
            $('#images-url').change(function (){
                let v = $(this).val()
                    ,h = ''
                    ,e = $('#images-group > div:eq(0)');

                h += '<div><input type="hidden" name="images[]" value="'+v+'">' +
                    '<img src="'+v+'"></div>';

                e.append(h);
                ins.reload();
            });
            $('.images-delete').on('click',function (){
                let e = ('#images-group');

                $(e).find('.layui-this').remove();
                ins.reload();
            });
        });

    }
</script>
